<template>
  <div class="align-c">
    <div class="rich-text article-box">
      <div v-for="(item, index) in content" :key="index">
        <!-- 文章 -->
        <div v-if="item.type==='text'" class="bg-color-white" :class="type === 'shopDetail' ? 'width-375' : 'width-355'"
          :style="'background:' + item.style.backColor">
          <div class="pad-t-6 pad-b-6" :class="item.style.sizeStyle + ' ' +
                item.style.shapeStyle + ' ' +
                item.style.alignStyle + ' ' +
                item.style.colorStyle"
                :style="'padding: '+ item.style.upperLowerMargins+'px '+ item.style.sideMargin+'px;'">
            <text space="nbsp" v-html="item.text"></text>
          </div>
        </div>
        <!-- 图片 -->
        <div v-if="item.type==='image'" class="bg-color-white" :class="type === 'shopDetail' ? 'width-375' : 'width-355'"
          :style="'background:' + item.style.backColor">
          <div :style="'padding: '+ item.style.upperLowerMargins+'px '+ item.style.sideMargin+'px;'">
            <img @click="$pt.previewImage({urls: [item.src]})" mode="widthFix" class="picture-bar" :src="item.src"/>
          </div>
        </div>
        <!-- 商品 -->
        <div v-if="item.type==='goods'" :class="type === 'shopDetail' ? 'width-375' : 'width-355'">
          <div v-if="item.goodsList" class="goods-box" :style="'background:' + item.backColor" :class="'list-' + item.listStyle">
            <div v-for="(itemGoods, indexGoods) in item.goodsList" :key="indexGoods"
             class="item pos-rel">
             <!-- 售空样式 -->
              <template v-if="itemGoods.sellType === 1">
                <div v-if="itemGoods.stock === 0" class="sell-out">
                  <div class="out-bar">
                    <img v-if="fileSpace" mode="widthFix" class="width-105 height-105 out-img"
                      :src="fileSpace + '/images/sold-out.png'"/>
                  </div>
                </div>
              </template>
              <div @click="pageTo(itemGoods.goodsId)">
                <div>
                  <img :src="itemGoods.imgUrl + '?imageView2/1/w/300/h/300'" mode="aspectFill" class="img-item"/>
                </div>
                <div class="goods-info pad-l-5 pad-r-5">
                  <p class="line-info">{{itemGoods.title}}</p>
                  <div class="flex v-align-c price-bar font-15">
                    <span class="flex-item">￥{{ itemGoods.price }}</span>
                    <label class="buy-btn">购买</label>
                  </div>
                </div>
              </div>
            </div>
          </div>          
        </div>
        <!-- 视频 -->
        <div class="bg-color-white text-align-c" :class="type === 'shopDetail' ? 'width-375' : 'width-355'"
          v-if="item.type==='video'">
          <video :src="item.shareArticleVideoDTO.videoUrl" :poster="item.shareArticleVideoDTO.videoImg" class="video"
            :class="'video-w-' + item.shareArticleVideoDTO.videoStyle"
            controls="controls" />
        </div>
        <!-- 音频 -->
        <div class="bg-color-white" :class="type === 'shopDetail' ? 'width-375' : 'width-355'"
          v-if="item.type==='audio'">
          <div class="align-c">
            <div class="audio-box pos-rel">
              <div class="audio-bar">
                <label v-show="!item.show" @click="audioPlay(item.sortNo)" class="width-42 height-42 audio-btn play"></label>
                <label v-show="item.show" @click="audioPause(item.sortNo)" class="width-42 height-42 audio-btn pause"></label>
              </div>
              <audio :id="'myAudio'+item.sortNo" class="audio-con"
               poster="https://projectimg.joinsun.vip/images/audio-default-2.png" :name="item.shareArticleAudioDTO.title"
               :author="item.shareArticleAudioDTO.subtitle" :src="item.shareArticleAudioDTO.audioUrl"
               controls="controls"
               :loop="item.shareArticleAudioDTO.loopPlayback === 1 ? 'loop':''"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ShowRichText',
    data() {
      return {
        isComponents: true,
        audioCtx: [],
        audioCtxObj: {}
      }
    },
    props: {
      content: {
        type: Object,
        default: null
      },
      fromGoodsId: {
        type: Object,
        default: null
      },
      type: {
        type: String,
        default: ''
      }
    },
    onLoad(options) {
      // 初始化data
      this.data()
    },
    methods: {
      audioPlay(num) {
        for (var i = 0; i < this.content.length; i++) {
          if (this.content[i].sortNo === num) {
            this.content[i].show = true
            const changeData = this.content[i].show
            this.$delete(this.content[i], 'show')
            this.$set(this.content[i], 'show', changeData)
          } else {
            this.content[i].show = false
            const changeData = this.content[i].show
            this.$delete(this.content[i], 'show')
            this.$set(this.content[i], 'show', changeData)
          }
          if (this.content[i].type === 'audio') {
            this.audioCtxObj[i].pause()
          }
          this.audioCtxObj[num].play()
        }
      },
      audioPause(num) {
        this.audioCtxObj[num].pause()
        for (var i = 0; i < this.content.length; i++) {
          if (this.content[i].sortNo === num) {
            this.content[i].show = false
          }
        }
      },
      audioStart(num) {
        this.audioCtxObj[num].seek(0)
      },
      data() {
        for (var i = 0; i < this.content.length; i++) {
          if (this.content[i].type === 'audio') {
            let num = this.content[i].sortNo
            this.audioCtx.push(num)
            this.content[i].show = false
          }
          if (this.content[i].type === 'text') {
            if (this.content[i].text.indexOf('align="center"') !== -1) {
              this.content[i].text = this.content[i].text.replace(/align="center"/g, 'style="text-align: center"')
            }
            if (this.content[i].text.indexOf('align="right"') !== -1) {
              this.content[i].text = this.content[i].text.replace(/align="right"/g, 'style="text-align: right"')
            }
            if (this.content[i].text.indexOf('align="left"') !== -1) {
              this.content[i].text = this.content[i].text.replace(/align="left"/g, 'style="text-align: left"')
            }
          }
        }
        let that = this
        setTimeout(() => {
          for (var a = 0; a < that.audioCtx.length; a++) {
            let item = that.audioCtx[a]
            that.audioCtxObj[item] = that.$pt.createAudioContext('myAudio' + item)
            that.audioCtxObj[item].show = false
          }
          for (var b = 0; b < this.content.length; b++) {
            if (this.content[b].type === 'audio') {
              if (this.content[b].shareArticleAudioDTO.autoPlayback === 1) {
                let numOn = this.content[b].sortNo
                this.audioCtxObj[numOn].play()
                this.content[b].show = true
                const changeData = this.content[b].show
                this.$delete(this.content[b], 'show')
                this.$set(this.content[b], 'show', changeData)
              }
            }
          }
        }, 200)
      },
      pageTo(goodsId) {
        // this.$pt.setStorageSync('__fromGoodsId__', this.fromGoodsId)
        this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + goodsId +
        '&fromGoodsId=' + this.fromGoodsId + '&userType=1&shareApplyType=2&goodsType=30&comissionFlag=0'})
      }
    }
  }
</script>

<style lang="less" scoped>
  // video
  .video{
    width: 100%;
    height: 191px;
    display: block;
    &.video-w-1{
      width: 100%;
      height: 191px;
    }
    &.video-w-2{
      width: 100%;
      height: 255px;
    }
    &.video-w-3{
      width: 100%;
      height: 340px;
    }
  }
  .width-355{
    .list-2{
      .item {
        max-width: 170px!important;
        width: 170px!important;
      }
    }
  }
  // 商品
  .list-2-bottom{
    border-top: #ededed 15px solid;
    background: #fff;
    height: 20px;
    margin-top: -27px;
  }
  .sell-out{    
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    .out-bar{
      background: rgba(0, 0, 0, 0.5);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      color: #fff;
      font-size: 15px;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 155px;
      z-index: 6;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .goods-box{
    background: #ededed;
    padding: 6px 5px;
    border-radius: 5px;
    .price-bar{
      color: #ec6700;
      padding: 6px 0 12px 0;
      .buy-btn{
        border: #ec6700 1px solid;
        border-radius: 5px;
        padding:0px 15px;
      }
    }
    .img-item {
      width: 100%;
      height: 155px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .goods-info{
      background: #fff;
      .line-info{
        padding: 8px 0 3px 0;
        font-size: 14px;
        height: 34px;
        line-height: 1.3;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }        
    }
    &.list-1{
      display: block;
      .item {
        max-width: 100%;
        width: 100%;
        margin-bottom: 15px;
        &:last-child{
          margin-bottom: 0;
        }      
      }
    }
    &.list-2{
      display: flex;
      flex-wrap: wrap;
      padding: 6px 0 6px 5px;
      .item {
        max-width: 180px;
        width: 180px;
        margin-right: 5px;
        margin-bottom: 15px;
        &:nth-child(even){
          margin-right: 0;
        }
      }
    }
  }
  .audio-box{
    margin: 6px 0px;
    width: 340px;
    height: 70px;
    overflow: hidden;
    text-align: center;
    .audio-con{
      display: inline-block;
      text-align: left;
    }
    .default-bar{
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 1;
    }
    .audio-bar{
      // background: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 0;
      top: 0;
      width: 70px;
      height: 70px;
      z-index: 2;
      .audio-btn{
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -21px;
      }
      .audio-title{
        position: absolute;
        left: 70px;
        top: 0;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        .audio-line-title{
          
        }
      }
    }
  }  
  .rich-text {
    // width: 335px;
    min-height: 200px;
  }
  .article-box{
    .picture-bar{
      width: 100%;
      height: 100%;
    }
    .font-w{
      font-weight: bold;
    }
    .font-italic{
      font-style: italic;
    }
    .font-under{
      text-decoration: underline;
    }
    .text-align-l {
      text-align: left;
    }
    .text-align-c {
      text-align: center;
    }
    .text-align-r {
      text-align: right;
    }
    .big-title {
      font-size: 25px;
      font-weight: 700;
    }
    .small-title {
      font-size: 18px;
      font-weight: 700;
    }
    .other-text {
      font-size: 13px;
    }
  }
</style>
